<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Media Chrome Examples</title>
  </head>
  <body>
    <h1>Explore the examples</h1>

    <h2>Getting started</h2>
    <ul>
      <li><a href="basic.html">Basic example</a></li>
      <li><a href="advanced.html">Advanced example</a></li>
      <li><a href="mobile.html">Mobile example</a></li>
      <li><a href="portrait.html">Portrait video example</a></li>
      <li><a href="casting.html">Casting video example</a></li>
      <li><a href="wrapper.html">Using a wrapper element for your UI</a></li>
      <li><a href="standalone-controls.html">Standalone controls</a></li>
      <li><a href="disabled.html">Disabled controls</a></li>
      <li><a href="animated-icons.html">Animated icons</a></li>
      <li><a href="slots-demo.html">Understanding <code>&lt;media-controller&gt;</code> slots</a></li>
      <li><a href="state-change-events-demo.html">State change events demo</a></li>
      <li><a href="pwa/">Progressive Web Application (PWA)</a></li>
      <li><a href="responsive.html">Responsive controls using Container Queries</a></li>
      <li><a href="responsive-attribute.html">Responsive controls using breakpoint attributes</a></li>
      <li><a href="tooltips.html">Tooltips</a></li>
      <li><a href="internationalization.html">Internationalization</a></li>
    </ul>

    <h2>Media element examples</h2>
    <ul>
      <li><a href="media-elements/hls.html">HLS Media Element</a></li>
      <li><a href="media-elements/dash.html">DASH Media Element</a></li>
      <li><a href="media-elements/youtube.html">Youtube Media Element</a></li>
      <li><a href="media-elements/vimeo.html">Vimeo Media Element</a></li>
      <li><a href="media-elements/videojs.html">Video.js Media Element</a></li>
      <li><a href="media-elements/jwplayer.html">JW Player Media Element</a></li>
      <li><a href="media-elements/wistia.html">Wistia Media Element</a></li>
      <li><a href="media-elements/spotify.html">Spotify Media Element</a></li>
      <li><a href="media-elements/mux-video.html"><code>&lt;mux-video&gt;</code> Media Element</a></li>
      <li><a href="media-elements/media-playlist.html">Media Playlist</a></li>
    </ul>

    <h2>Example themes</h2>
    <ul>
      <li><a href="themes/tailwind-audio-theme.html">Tailwind Audio Theme</a></li>
      <li><a href="themes/minimal-theme.html">Minimal Theme</a></li>
      <li><a href="themes/microvideo-theme.html">Microvideo Theme</a></li>
      <li><a href="themes/youtube-theme.html">Youtube Theme</a></li>
      <li><a href="themes/winamp-theme.html">Winamp Theme</a></li>
      <li><a href="themes/demuxed-2022-theme.html">Demuxed 2022 Theme</a></li>
    </ul>

    <h2>Individual controls</h2>

    <ul>
      <li>
        <a href="https://www.media-chrome.org/docs/en/components/media-play-button" target="_blank">
          All individual controls in the docs
        </a>
      </li>
      <li><a href="components.html">All components (useful for testing)</a></li>
      <li><a href="control-elements/media-error-dialog.html">Error Dialog</a></li>
      <li><a href="control-elements/media-settings-menu.html">Settings Menu</a></li>
      <li><a href="control-elements/media-chrome-menu.html">Chrome Menu</a></li>
      <li><a href="control-elements/media-captions-menu.html">Captions menu</a></li>
      <li><a href="control-elements/media-playback-rate-menu.html">Playback rate menu</a></li>
      <li><a href="control-elements/media-rendition-menu.html">Rendition menu</a></li>
      <li><a href="control-elements/media-audio-track-menu.html">Audio track menu</a></li>
      <li><a href="control-elements/media-context-menu.html">Media context menu</a></li>
    </ul>

    <h3>Extras</h3>
    <ul>
      <li><a href="control-elements/media-clip-selector.html">Clip selector</a></li>
    </ul>
  </body>
</html>
